<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        select {
            width: 150px;
            height: 200px;
            background-color: #7bff68;
        }
    </style>
</head>
<body>
<select size="10" name="aaa" id="sel1" multiple="multiple">
    <option value="0">1香蕉</option>
    <option value="1">2苹果</option>
    <option value="2">3大鸭梨</option>
    <option value="3">4草莓</option>
</select>

<input type="button" value=">>>"/>
<input type="button" value="<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/>

<select size="10" name="bbb" id="sel2" multiple="multiple">

</select>

<script>
    //需求：点击按钮把对应的选中项移动到另一侧。
    //技术点：如果移动单一的选项，那么看看哪个选项是有selected的。
            //如果移动所有的选项，那么直接把sel1中的所有选项放入sel2中。

    //步骤：
    //1.获取事件源和相关元素
    //2.绑定事件
    //3.书写事件驱动程序

    var sel1 = document.getElementById("sel1");
	var sel2 = document.getElementById("sel2");
	var inpArr = document.getElementsByTagName("input");
	
	inpArr[0].onclick = function (){
		fn(sel1,sel2);
	}
	inpArr[1].onclick = function (){
		fn(sel2,sel1);
	}
	function fn(ele1,ele2) {
		var optArr = ele1.children;
		for(var i = 0;i<optArr.length;){
			ele2.appendChild(optArr[i]);
		}
	}
	
	inpArr[2].onclick = function (){
		fn1(sel1,sel2);
	}
	inpArr[3].onclick = function (){
		fn1(sel2,sel1);
	}
	function fn1(ele1,ele2){
		var optArr = ele1.children;
		for(var i = optArr.length-1;i>=0;i--){
			if(optArr[i].selected == true){
				// optArr[i].selected==false;
				ele2.appendChild(optArr[i]);
			}
		}
		//获取sel2中的子元素变成真数组,然后排序
		var aaa = Array.from(ele2.children).sort(function (a,b) {
			return a.value-b.value;
		});
		//删除所有子元素
		for(var i = 0;i<ele2.children.length;i++){
			ele2.removeChild(ele2.children[i]);
		}
		//把排好序的数组添加到sel2中
		for(var i = 0;i<aaa.length;i++){
			
			ele2.appendChild(aaa[i]);
			
		}
	}
// 	inpArr[3].onclick = function (){
// 		var optArr = sel2.children;
// 		for(var i = optArr.length-1;i>=0;i--){
// 			if(optArr[i].selected==true){
// 				optArr[i].selected==false;
// 				sel1.appendChild(optArr[i]);
// 			}
// 		}
// 		var aaa = Array.from(sel1.children).sort(function (a,b){
// 			return a.value-b.value;
// 		});
// 		for(var i = 0;i<sel1.children.length;i++){
// 			sel1.removeChild(sel1.children[i]);
// 		}
// 		for(var i = 0;i<aaa.length;i++){
// 			sel1.appendChild(aaa[i]);
// 		}
// 	}
</script>

</body>
</html>